<template>
    <div>
      <input placeholder="输入关键字搜索" v-model="inputText"/>
      <table class="my-table">
        <thead>
          <tr>
            <th>就诊日期</th>
            <th>医生姓名</th>
            <th>诊断结果</th>
            <th>处方信息</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in filteredRecords" :key="item.id">
            <td>{{ item.date }}</td>
            <td>{{ item.doctor }}</td>
            <td>{{ item.diagnosis }}</td>
            <td>{{ item.prescription }}</td>
            <td @click="shows(item.date)">详情</td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script>
  
  
  export default {
    props: {
      records: Array,
      isShow: Boolean
    },
    data() {
      return {
        inputText: "",
        list:[]
      };
    },
    computed:{
      filteredRecords() {
        if (this.inputText === "") {
          return this.records;
        } else {
          return this.records.filter(item => {
            return (
              item.date.includes(this.inputText) ||
              item.doctor.includes(this.inputText) ||
              item.diagnosis.includes(this.inputText) ||
              item.prescription.includes(this.inputText)
            );
          });
        }
      },
    },
    methods:{
        shows(time){
        this.$emit('shows');
        this.list = this.records.filter(item => item.date === time);
        // console.log(this.list);
        this.$emit('getDialog',this.list);
      }
    }
  };
  </script>
  
  <style scoped>
  .my-table {
    border-collapse: collapse;
    width: 100%;
  }
  
  .my-table td,
  .my-table th {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  
  .my-table th {
    background-color: #f2f2f2;
  }
  </style>